<template>
  <view class="institution">
    <!--    <view :style="'height:'+statusBarHeight+'px;'">
    </view> -->
    <!-- 		<view v-if="isDetail&&isDetail.status!=2" style="height: 88rpx;"></view>
		<view v-if="isDetail&&isDetail.status!=2" class="auditStatus">
			<view v-if="isDetail&&isDetail.status==1" class="waiting">
				正在审核中···
			</view>
			<view v-if="isDetail&&isDetail.status==3" class="fail">
				审核失败
			</view>
		</view> -->
    <view v-if="isDetail.status==1" class="waiting">
      正在审核中···
    </view>
    <view v-if="isDetail.status==3" class="fail">
      审核失败
    </view>
    <view class="inputBox flex-center-between">
      <view class="inputName">
        机构名称
      </view>
      <u-input maxlength="50" placeholder="请填写机构名称" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle" inputAlign="right" v-model="formData.company" clearable></u-input>
    </view>
    <view class="inputBox flex-center-between">
      <view class="inputName">
        机构地址
      </view>
      <!-- 	<view class="flex-center-between">
				<u-input placeholder="填选择地址信息" :border="border" @click="onAdress" disabled="true"
					:customStyle="inputStyle" inputAlign="right" v-model="formData.address" clearable></u-input>
				<image style="width: 32rpx;height:32rpx" src="../../../static/images/right.png" mode=""></image>
			</view> -->
      <u-input maxlength="50" placeholder="请填写地址信息" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle" inputAlign="right" v-model="formData.address" clearable></u-input>
    </view>
    <view class="inputBox flex-center-between">
      <view class="inputName">
        负责人姓名
      </view>
      <u-input maxlength="20" placeholder="请填写负责人姓名" :border="border" :disabled="isDetail&&isDetail.status!=3" :customStyle="inputStyle" inputAlign="right" v-model="formData.name" clearable></u-input>
    </view>
    <view class="inputBox flex-center-between">
      <view class="inputName">
        负责人电话
      </view>
      <u-input placeholder="请填写负责人电话" type="number" maxlength="11" :disabled="isDetail&&isDetail.status!=3" :border="border" :customStyle="inputStyle" inputAlign="right" v-model="formData.phone" clearable></u-input>
    </view>
    <view class="inputBox flex-center-between">
      <view class="inputName">
        机构类型
      </view>
      <view class="type flex-center-between">
        <view @click="onOrganization_type(1)" :class="{'active':formData.organization_type==1}" class="part">
          教育机构
        </view>
        <view @click="onOrganization_type(2)" :class="{'active':formData.organization_type==2}" style="margin-left: 24rpx;" class="part">
          乐器供应商
        </view>
      </view>
    </view>
    <view v-if="formData.organization_type==2" class="selectWra">
      <view style="width: 100%;padding:0 24rpx;box-sizing: border-box;" class="flex-center-between">
        <view class="inputName">
          代理品牌
        </view>
        <view class="flex-center-center">
          <u-input placeholder="去选择" @click="toSelect" :border="border" disabled="true" :customStyle="inputStyle" inputAlign="right" v-model="formData.value" clearable></u-input>
          <image style="width: 32rpx;height:32rpx;" src="../../../static/images/right.png" mode=""></image>
        </view>
      </view>
      <view class="selectBox">
        <view v-for="(item,index) in formData.brand " :key="index" class="selectBox-part flex-center-center">
          <view class="selectBox-part-name exceedingEllipsis">{{item.title}}</view>
          <image @click="deleteBrand(item,index)" src="../../../static/images/my/delete.png" mode=""></image>
        </view>
      </view>
    </view>
    <view class="businessLicense">
      <text class="inputName">
        上传营业执照
      </text>

      <view class="uploadBox1">
        <u-upload width="200" :max-count="!isDetail?'9':'1'" height="200" :action="action" upload-text="上传图片" :file-list="fileList" @on-remove="onRemove" :deletable="!isDetail" @on-success="onsSuccess">

        </u-upload>
      </view>

    </view>
    <view class="illustrate">
      <text class="name">
        申请说明
      </text>
      <view class="textareaBox">
        <u-input class="textarea" maxlength="200" placeholder="请填写说明" type="textarea" v-model="formData.main_content" clearable></u-input>
      </view>
    </view>

    <view :style="'padding-bottom:'+ safeAreaBottom+'px;height:120rpx;'"></view>

    <view class="bottom flex-center-center">

      <view v-if="isStatus==1">
        <view v-if="vip_info.is_vip==1" class="applyFor flex-center-between">
          <view style="display: flex;flex-direction: column;">
            <text class="price">￥{{isprice}}/年</text>
            <text class="stop">会员截止：{{vip_info.vip_end}}</text>
          </view>
          <text @click="onSubmit" class="btn">
            立即续费
          </text>
        </view>
        <view v-if="vip_info.is_vip==0&&isDetail.status==3" class="result flex-center-between">
          <view @click="onReason" class="reason" style="margin-right: 24rpx;">
            查看原因
          </view>
          <view @click="onSubmit" class="resubmit">
            重新提交
          </view>
        </view>
      </view>
      <view v-if='isStatus==0' class="applyFor flex-center-between">
        <view style="display: flex;flex-direction: column;">
          <text class="price">￥{{isprice}}/年</text>
        </view>
        <text @click="onSubmit" class="btn">
          申请认证
        </text>
      </view>

      <view :style="'height:'+safeAreaBottom+'px'">

      </view>
    </view>
    <payPop ref="payPop" @payBack="payBack"></payPop>
    <u-picker class="" mode="region" v-model="showAdress" @confirm="onchange($event)" :defaultRegion="defaultRegion">
    </u-picker>
    <xModal v-model="contractObj.isShow" :showBotton="contractObj.showBotton" :showOneBotton="contractObj.showOneBotton" :title="contractObj.title" @confirm="confirm" @cancel="cancel" :cancelText="contractObj.cancelText" :confirmText="contractObj.confirmText" :canColse="false">
      {{contractObj.content}}
    </xModal>
  </view>
</template>

<script>
import xModal from '../../../components/x-modal/x-modal.vue';
import api from '@/api/index.js';
import payPop from '../payPop.vue';
import config from '@/js/config.js';
export default {
  components: {
    xModal,
    payPop
  },
  data() {
    return {
      statusBarHeight: uni.getStorageSync('statusBarHeight'),
      safeAreaBottom: uni.getStorageSync('safeAreaBottom'),
      border: false,
      showAdress: false,
      defaultRegion: [],
      show: true,
      isprice: '0',//开通会员价格
      isStatus: 0,//首次加载 是否需要申请验证按钮
      inputStyle: {
        'width': '50%',
        'font-size': '28rpx'
      },
      contractObj: {
        title: '失败原因',
        content: '',
        isShow: false,
        showBotton: false,
        cancelText: '取消',
        confirmText: '确认',
        showOneBotton: true,
      },
      list: [],
      selectList: [],
      formData: {
        types: 1,
        company: '',
        address: '',
        name: '',
        phone: '',
        organization_type: 1,
        brand: [],
        license: '',
        main_content: '',
        total_money: 200,
        actual_money: 200,
        payment: '',
        terminal: uni.getSystemInfoSync().platform,
      },
      vip_info: {

      },
      isDetail: false,
      action: `${config.reqUrl}/api/common/upload`,
      fileList: []
    }
  },
  onShow() {
    this.getData();
  },
  onLoad(options) {
    let that = this;
    uni.$on('list', arr => {
      that.selectList = arr;
      that.formData.organization_type = 2;
      that.formData.brand = [];
      that.selectList.map((item, index) => {
        item.children.map(child => {
          if (child.isSelect) {
            that.formData.brand.push(child)
          }
        })

      })
    })
    // if (options.list) {
    // 	if (uni.getStorageSync('formData')) {
    // 		this.formData = uni.getStorageSync('formData');
    // 	}
    // 	this.formData.brand = [];
    // 	this.selectList = JSON.parse(decodeURIComponent(options.list));
    // 	console.log('接受list', this.selectList)
    // 	this.formData.organization_type = 2;
    // 	this.selectList.map((item, index) => {
    // 		item.children.map(child => {
    // 			if (child.isSelect) {
    // 				this.formData.brand.push(child)
    // 			}
    // 		})

    // 	})
    // }else{

    // }
  },
  methods: {

    getData() {
      let that = this;
      api.base.getDev_applyDetail({
        types: 1
      }).then(res => {
        that.fileList = [];
        // that.isDetail = res.data.apply_info;
        that.vip_info = res.data.vip_info;
        that.isStatus = res.data.state
        that.isprice = res.data.price
        console.log('cvsdck1', that.isprice)
        if (res.data.apply_info && res.data.apply_info.status > 0) {
          that.isDetail = res.data.apply_info;
          if (res.data.apply_info) {
            that.fileList = [];
            that.formData = res.data.apply_info;
            that.fileList.push({
              url: res.data.apply_info.license
            });

            that.selectList = this.formData.brand;
            that.$forceUpdate();
          }
        }

      })
    },
    onAdress() {
      if (this.isDetail && this.isDetail.status != 3) {
        return;
      };
      this.showAdress = true;
    },
    onOrganization_type(type) {
      if (this.isDetail && this.isDetail.status != 3) {
        return;
      };
      this.formData.organization_type = type;
    },
    onUpload() {
      let that = this;
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera', 'album'], //album 从相册选图，camera 使用相机
        success: function (res) {
          that.formData.license = JSON.stringify(res.tempFilePaths)
          console.log(JSON.stringify(res.tempFilePaths)); //拍照图片的路径
        }
      });
    },
    toSelect() {
      if (this.isDetail && this.isDetail.status != 3) {
        return;
      }
      let selectList = JSON.stringify(this.selectList);
      uni.setStorageSync('formData', this.formData);
      uni.navigateTo({
        url: '/pages/my/institution/selectSupplier?selectList=' + encodeURIComponent(selectList)
      })
    },
    deleteBrand(item, index) {
      if (this.isDetail && this.isDetail.status != 3) {
        return;
      }
      this.formData.brand.splice(index, 1);
      this.selectList.map(p => {
        if (p.type == item.py) {
          p.children.map(son => {
            if (son.title == item.title) {
              son.isSelect = false;
            }
          })
          // Delete p
        }
      });
      this.$forceUpdate()

    },
    onchange(e) {
      console.log(e)
      this.defaultRegion[0] = e.province.name;
      this.defaultRegion[1] = e.city.name;
      this.defaultRegion[2] = e.area.name;
      this.formData.address = e.province.name + '' + e.city.name + '' + e.area.name;
      this.showAdress = false;
    },
    onReason() {
      this.contractObj.content = this.formData.reject_reason;
      this.contractObj.isShow = true;
    },
    confirm() {
      this.contractObj.isShow = false;
    },
    cancel() {
      this.contractObj.isShow = false;
    },
    check() {
      const phoneReg = /^1[34578]\d{9}/;
      let showText = '';
      if (!this.formData.company) {
        showText = "请填写机构名称";
      } else if (!this.formData.address) {
        showText = "请填写地址信息";
      } else if (!this.formData.name) {
        showText = "请填写负责人姓名";
      } else if (!phoneReg.test(this.formData.phone)) {
        showText = "请输入正确负责人电话";
      } else if (this.fileList.length == 0) {
        showText = "请上传营业执照照片";
      } else if (!this.formData.main_content) {
        showText = "请填写申请说明";
      }
      if (showText) {
        uni.showToast({
          icon: 'none',
          title: showText
        });
        return false;
      };
      return true;
    },
    onSubmit() {
      let flag = this.check();
      if (!flag) {
        return;
      };
      let that = this;
      that.$refs.payPop.open({
        type: 1,
        total_money: that.isprice,
        actual_money: that.isprice
      });
      that.formData.license = this.fileList[0].url;
      console.log('=-----------------==')
      console.log(that.formData.license);

    },
    payBack(e) {
      console.log('支付完成')
      this.formData = {
        ...this.formData,
        ...e
      };
      api.base.getDev_applyApply(this.formData).then(res => {
        console.log('添加机构详情', res)

        // this.isStatus=1
        // this.getData();
        // this.$router.go(0);
        // this.formData = {
        // 	types: 1,
        // 	company: '',
        // 	address: '',
        // 	name: '',
        // 	phone: '',
        // 	organization_type: 1,
        // 	brand: [],
        // 	license: '',
        // 	main_content: '',
        // 	total_money: 200,
        // 	actual_money: 200,
        // 	payment: '',
        // 	terminal: uni.getSystemInfoSync().platform
        // };
        // this.fileList.splice(0,1);

        // this.$router.go(0);

        // console.log('结束',this.fileList)
        // this.$forceUpdate();
        this.getData();
        this.$router.go(0)

      })

    },

    // onRemove(index, lists) {
    //   this.fileList.splice(index, 1)
    //   this.imgNum--
    // },
    // onsSuccess(data, index, lists, name) {
    //   this.fileList.push({ url: data.data.url })
    //   this.imgNum++
    // },

    onRemove(index, lists) {
      console.log('删除')
      if (this.isDetail && this.isDetail.status != 3) {
        return;
      };
      this.fileList.splice(index, 1)
      // this.imgNum--
    },
    onsSuccess(data, index, lists, name) {
      this.fileList.push({
        url: data.data.url
      })

      //   this.imgNum++
    },
  }
}
</script>

<style lang="scss" scoped>
@import "../my.scss";
// 头部状态
.waiting {
  height: 88rpx;
  background: #f9ae3d;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 24rpx;
  margin-top: -24rpx;
}
.fail {
  height: 88rpx;
  background: #f56c6c;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
  opacity: 1;
  width: 100%;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  font-size: 30rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  margin-bottom: 24rpx;
  margin-top: -24rpx;
}
.institution {
  padding-top: 24rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  .selectWra {
    width: 686rpx;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 10rpx 0rpx 24rpx 0rpx;
    box-sizing: border-box;
    margin-bottom: 20rpx;

    .selectBox {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      justify-content: flex-start;
      // .selectBox-part:nth-child(2) {
      // 	margin-left: 0;
      // }

      &-part {
        width: 197rpx;
        height: 66rpx;
        background: #ffffff;
        border-radius: 12rpx 12rpx 12rpx 12rpx;
        border: 2rpx solid #6d0cf7;
        font-size: 24rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: #6d0cf7;
        margin-bottom: 20rpx;
        margin-left: 24rpx;
        box-sizing: border-box;

        &-name {
          width: 125rpx;
          text-align: center;
        }

        image {
          flex-shrink: 0;
          width: 32rpx;
          height: 32rpx;
          margin-left: 10rpx;
        }
      }
    }
  }
}
</style>